<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="state">
                    <option value="">请选择状态</option>
                    <option value="1">1</option>
                    <option value="0">0</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="searchBtn">搜索</button>
            </div>
        </div>
    </div>

</form>
<table id="usertable" lay-filter="usertable"></table>
<script src="./layui/layui.js"></script>

<!--据表格添加上方工具条-->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>

    </div>
</script>

<script type="text/html" id="user-add-layer">
    <form id="user-add-form" style="width: 80%" class="layui-form" lay-filter="user-add-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">介绍</label>
            <div class="layui-input-block">
                <input type="text" name="description" required lay-verify="required" placeholder="请输入介绍"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" value="1" title="1" checked="">
                <input type="radio" name="state" value="0" title="0">
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="user-edit-layer">
    <form id="user-edit-form" style="width: 80%" class="layui-form" lay-filter="user-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">介绍</label>
            <div class="layui-input-block">
                <input type="text" name="description" required lay-verify="required" placeholder="请输入介绍"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" value="1" title="1" checked="">
                <input type="radio" name="state" value="0" title="0">
            </div>
        </div>
    </form>
</script>
<!--单行数据编辑-->
<script type="text/html" id="user-edit-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-user">编辑</a>
</script>
<script>
    layui.use(function () {
        var table = layui.table;
        var $ = layui.$;
        var laydate = layui.laydate;
        var form = layui.form;

        table.render({
            elem: '#usertable'
            , toolbar: '#toolbar'
            , height: 312
            , url: '/ssm2202/sysparam/getallparams'
            , page: true //开启分页
            , limits: [2, 4, 6, 8, 10]
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 80, sort: true}
                , {field: 'name', title: '名称', width: 80}
                , {field: 'description', title: '介绍', width: 80}
                , {field: 'state', title: '状态', width: 80}
                , {title: '操作', fixed: 'right', toolbar: '#user-edit-bar'}
            ]]
        });
        //监听行工具事件
        table.on('tool(usertable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit-user': {
                    openEditWindow(data);
                    break;
                }
            }
        });
        table.on('toolbar', function (obj) {
            switch (obj.event) {
                case 'add':
                    openEditWindow(null);
                    break;
                case 'delete':
                    var data = table.checkStatus('usertable').data;
                    if (data.length > 0) {
                        var param = ""
                        $.each(data, function (i, obj) {
                            param += "&ids=" + obj.id
                        })
                        $.ajax({
                            url: '/ssm2202/sysparam/del',
                            data: param,
                            method: 'post',
                            success: function (result) {
                                if (result.code == 1) {
                                    table.reload('usertable', {});
                                    layer.close(index);
                                } else {
                                    alert(result.message)
                                }
                                layer.close(index);
                            }
                        })
                    }
                    break;
            }
        });
        //监听搜索表单的提交事件
        form.on('submit(searchBtn)', function (data) {
            console.log(data.field);
            // 让数据表格中的数据根据查询条件重新加载
            table.reload('usertable', {
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });
        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: data == null ? $('#user-add-layer').html() : $('#user-edit-layer').html(),
                title: '编辑'
                , area: ['500px', '400px'],
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) {
                    layer.load();
                    console.log($("#user-add-form").serialize());
                    $.ajax({
                        url: "/ssm2202/sysparam/" + (data == null ? 'add' : 'update'),
                        //  url: '/sys/customer/update',
                        data: data == null ? $("#user-add-form").serialize() : $("#user-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.code == 1) {
                                table.reload('usertable', {});
                                layer.close(index);
                            } else {
                                alert(result.message)
                            }
                            layer.closeAll('loading');
                        }
                    });
                }, success: function (layero, index) {
                    form.render();
                    //日期
                    laydate.render({
                        elem: '#birthday'
                    });
                    laydate.render({
                        elem: '#registTime'
                    });
                    laydate.render({
                        elem: '#birthday1'
                    });
                    laydate.render({
                        elem: '#registTime1'
                    });
                    // 为编辑模式填充数据
                    if (data != null) {
                        form.val("user-edit-form", data);
                    }
                }
            });
        }
    });
</script>
